<template>
	<view v-if="goods_info.goods_name" class="goods-detail-container">
		<!-- 轮播图区域 -->
		<swiper
			:indicator-dots="true"
			:autoplay="true"
			:interval="3000"
			:duration="1000"
			:circular="true"
		>
			<swiper-item v-for="(item, i) in goods_info.pics" :key="i">
				<image :src="item.pics_big" @click="preview(i)" />
			</swiper-item>
		</swiper>

		<!-- 商品信息区域 -->
		<view class="goods-info-box">
			<!-- 商品价格 -->
			<view class="price">¥ {{ goods_info.goods_price }}</view>
			<!-- 商品信息主体区域 -->
			<view class="goods-info-body">
				<!-- 商品的名字 -->
				<view class="goods-name">{{ goods_info.goods_name }}</view>
				<!-- 收藏 -->
				<view class="favi">
					<uni-icons type="star" size="18" color="gray"></uni-icons>
					<text>收藏</text>
				</view>
			</view>
			<!-- 运费 -->
			<view class="yf">快递: 免运费</view>
		</view>

		<!-- rich-text 是 uni 的富文本标签, 可以看文档了解 -->
		<rich-text :nodes="goods_info.goods_introduce"></rich-text>

		<!-- 商品导航组件区域 -->
		<view class="goods-nav">
			<uni-goods-nav
				:fill="true"
				:options="options"
				:buttonGroup="buttonGroup"
				@click="onClick"
				@buttonClick="buttonClick"
			/>
		</view>
	</view>
</template>

<script>
// 导入 vuex
import { mapState, mapMutations, mapGetters } from 'vuex';

export default {
	computed: {
		// 使用展开运算符, 引入 小仓库 m-cart 中的 cart 数组数据
		...mapState('m_cart', []),
		...mapGetters('m_cart', ['total']),
	},
	watch: {
		// total(newValue) {
		// 	// 这里的 options 是下面 data 中的数组属性
		// 	// 查找 options 中 购物车的 代码区域, 并用 findResult 来接收
		// 	const findResult = this.options.find((x) => x.text === '购物车');
		// 	// 如果 findResult 是 true ,则 给商品数量 重新赋值
		// 	if (findResult) {
		// 		findResult.info = newValue;
		// 	}
		// },
		total: {
			handler(newValue) {
				// 这里的 options 是下面 data 中的数组属性
				// 查找 options 中 购物车的 代码区域, 并用 findResult 来接收
				const findResult = this.options.find(
					(x) => x.text === '购物车'
				);
				// 如果 findResult 是 true ,则 给商品数量 重新赋值
				if (findResult) {
					findResult.info = newValue;
				}
			},
			// immediate 的用法是, 让页面加载时, 就立刻调用 handler()
			immediate: true,
		},
	},
	data() {
		return {
			goods_info: {},
			options: [
				{
					icon: 'shop',
					text: '店铺',
					// info: 2,
					infoBackgroundColor: '#ff0000',
					infoColor: 'white',
				},
				{
					icon: 'cart',
					text: '购物车',
					info: 0,
				},
			],
			buttonGroup: [
				{
					text: '加入购物车',
					backgroundColor: '#ff0000',
					color: '#fff',
				},
				{
					text: '立即购买',
					backgroundColor: '#ffa200',
					color: '#fff',
				},
			],
		};
	},
	onLoad(options) {
		const goods_id = options.goods_id;
		this.getGoodsDetail(goods_id);
	},
	methods: {
		// 引入 vuex 中 购物车小仓库的 mutations
		...mapMutations('m_cart', ['addToCart']),

		// 获取商品详情数据的接口方法
		async getGoodsDetail(goods_id) {
			const { data: res } = await uni.$http.get(
				'/api/public/v1/goods/detail',
				{ goods_id }
			);

			if (res.meta.status !== 200) return uni.$showMsg();

			// 将接口返回的长串图片包含html的标签进行替换
			res.message.goods_introduce = res.message.goods_introduce
				.replace(/<img /g, '<img style="display:block;" ')
				.replace(/webp/g, 'jpg');

			this.goods_info = res.message;
		},
		// 点击轮播图图片放大方法
		preview(i) {
			uni.previewImage({
				current: i,
				// 这里循环接口中的图片地址, 使用map()返回成一个新数组
				urls: this.goods_info.pics.map((x) => x.pics_big),
			});
		},
		// 点击底部导航的方法
		onClick(e) {
			if (e.content.text === '购物车') {
				uni.switchTab({
					url: '/pages/cart/cart',
				});
			}
		},
		// 另一个点击底部导航的自定义点击方法
		buttonClick(e) {
			if (e.content.text === '加入购物车') {
				// 组织商品的信息对象
				// {goods_id,goods_name,goods_price,goods_count,goods_small_logo,goods_state}
				const goods = {
					goods_id: this.goods_info.goods_id,
					goods_name: this.goods_info.goods_name,
					goods_price: this.goods_info.goods_price,
					goods_count: 1,
					goods_small_logo: this.goods_info.goods_small_logo,
					goods_state: true,
				};
				// 调用 addToCart() 方法
				this.addToCart(goods);
			}
		},
	},
};
</script>

<style lang="scss">
swiper {
	height: 750rpx;
	image {
		width: 100%;
		height: 100%;
	}
}

.goods-info-box {
	padding: 10px;
	padding-right: 0;
	.price {
		color: #c00000;
		font-size: 18px;
		margin: 10px 0;
	}
	.goods-info-body {
		display: flex;
		justify-content: space-between;
		.goods-name {
			font-size: 13px;
			margin-right: 10px;
		}
		.favi {
			width: 120px;
			font-size: 12px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-left: 1px solid #efefef;
			color: gray;
		}
	}
	.yf {
		font-size: 12px;
		color: gray;
		margin: 10px 0;
	}
}

.goods-nav {
	// 相对于浏览器窗口的绝对定位
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
}

.goods-detail-container {
	padding-bottom: 50px;
}
</style>
